<!-- 冲红开票详情 -->
<template>
	<a-modal v-bind="options" class="invoiceing-detail-dialog">
		<div v-if="[5, 2].includes(props?.detailedData?.status)" class="failure-box">
			<ExclamationCircleFilled v-color="{color: COLOR_MAP.orange}" />
			<span v-color="{color: COLOR_MAP.orange}" class="failure-reason">
				异常原因:
				<a-tooltip :title="props?.detailedData?.failureReason" placement="top">
					<span v-if="props?.detailedData?.failureReason">【{{ props?.detailedData?.failureReason }}】</span>
					<span v-else>
						【可能存在设备离线，或者发票库存不足，核验设备及发票库存状况之后，可以重新推送发票信息，或撤销重新申请。】
					</span>
				</a-tooltip>
			</span>
		</div>
		<div class="invoiceing">
			<span class="invoiceing-text">发票状态 :</span>
			<span>{{ multiplicationData[props.detailedData?.status] }}</span>
		</div>
		<div class="invoiceing">
			<span>发票号码 :</span>
			<span class="invoiceing-text">
				<a>{{ props?.detailedData?.invoiceNo || '--' }}</a>
				<!-- 补录不予许下载 5 6 类型的发票也不允许下载 -->
				<a
					v-if="props.detailedData?.status === 4 && props?.sourceType !== 1 && ![5, 6].includes(props?.detailedData?.invoiceType)"
					:href="props?.detailedData?.downloadUrl"
					download="发票">
					<download-outlined class="flush-red-icon" />
				</a>
			</span>
		</div>
		<vxe-grid ref="grid" v-bind="gridOptions" class="grid" :data="props?.detailedData?.items">
			<template #bottom>
				<vxe-toolbar perfect>
					<template #buttons>
						<div class="table-bottom-class" v-for="(e, index) in bottomBtn" :key="index">
							{{ e.name }}:
							<span v-color="{color: COLOR_MAP.primary}">{{ e.money.toFixed(2) || 0 }}元</span>
						</div>
					</template>
				</vxe-toolbar>
			</template>
		</vxe-grid>

		<template #footer>
			<a-button v-if="props.detailedData?.status === 1" type="primary" @click="handlerClick('redBlood')">冲红</a-button>
			<a-button v-if="props.detailedData?.status === 6" @click="handlerClick('revokeFlushing')">撤销</a-button>
			<a-button v-if="props.detailedData?.status === 6" type="primary" @click="handlerClick('rePush')">重新推送</a-button>
		</template>
	</a-modal>

	<!-- 冲红---重新提交 -->
	<apply-flush-red
		v-model:visible="visibles.redBlood"
		:invoiceKind="props?.detailedData?.invoiceKind"
		:resubmitId="resubmitId"
		:id="props?.invoiceDetails?.id"
		@close="visibles.redBlood = false"></apply-flush-red>

	<!-- 撤销冲红 -->
	<invoice-revoke-flushing
		v-model:visible="visibles.revokeFlushing"
		:id="props?.invoiceDetails?.id"
		@close="visibles.revokeFlushing = false"></invoice-revoke-flushing>

	<!-- 重新推送 -->
	<invoice-void-push
		v-model:visible="visibles.rePush"
		:id="props?.invoiceDetails?.id"
		@close="visibles.rePush = false"></invoice-void-push>
</template>

<script lang="ts" setup>
	import {reactive, ref, toRef, watchEffect, watch} from 'vue'
	import {VxeGridInstance, VxeGridProps} from 'vxe-table'
	import {FormInstance, message} from 'ant-design-vue'
	import {COLOR_MAP} from 'yuxin-base/src/constant'
	import {multiplicationList, multiplicationData} from '@/utils/billing-history-status'
	import {DownloadOutlined, ExclamationCircleFilled} from '@ant-design/icons-vue'
	import {financeBillFlowAudit, getFinanceBillFlowDetail} from '@/api/details'
	import ApprovalInformation from '@/components/common/approval-information.vue'
	import InvoiceDetail from '@/pages/finance/invoice-administration/billing-history/invoice-detail.vue'
	import ApplyFlushRed from '@/components/finance/invoice-administration/billing-history/apply-flush-red.vue'
	import InvoiceRevokeFlushing from '@/components/finance/invoice-administration/billing-history/invoice-revoke-flushing.vue'

	import InvoiceVoidPush from '@/components/finance/invoice-administration/billing-history/invoice-void-push.vue'

	const props = defineProps<{
		id?: string
		processInstanceId?: string
		visible: boolean
		detailedData?: any
		invoiceInfoId?: string
		sourceType: number
	}>()

	const loadings = reactive({
		audit: false,
		detail: false
	})

	const resubmitId = ref('')

	// const invoiceKind = ref(1)

	const emits = defineEmits(['update:visible', 'close'])

	const options = reactive({
		title: '发票明细',
		width: 1200,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			// emits('close')
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const bottomBtn = reactive([
		{
			name: '价税合计',
			money: 0
		},
		{
			name: '税额合计',
			money: 0
		},
		{
			name: '税后合计',
			money: 0
		}
	])

	const detail = ref<any>({
		totalMoney: 0
	})
	const formRef = ref<FormInstance>()

	const visibles = reactive<any>({
		search: false,
		invoiceDetail: false,
		// 冲红
		redBlood: false
	})

	const grid = ref<VxeGridInstance>()

	const gridOptions = reactive<VxeGridProps>({
		// height: 'auto',
		showOverflow: true,
		border: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				field: 'feeSubjectName',
				title: '费用类型',
				width: 200
			},
			{
				title: '发票票面金额(元)',
				// minWidth: 150,
				formatter({row}) {
					return row.price?.toFixed(2)
				}
			},
			{
				title: '开票税率',
				// minWidth: 350,
				formatter({row}) {
					return row.taxRate ? row?.taxRate * 100 + '%' : '-'
				}
			},
			{
				title: '开票税额(元)',
				// minWidth: 150,
				formatter({row}) {
					return row.taxPrice?.toFixed(2)
				}
			},
			{
				title: '开票税收金额(元)',
				// minWidth: 350,
				formatter({row}) {
					return row?.afterTaxPrice?.toFixed(2)
				}
			},
			{
				title: '优惠政策',
				// width: 120,
				formatter({row}) {
					// 优惠政策标识【0不使用，1：免税 2不征税】
					return row?.preferentialPolicyType === 0 ? '无优惠' : `${row?.preferentialPolicyType === 1 ? '免税' : '不征税'}`
				}
			}
		]
	})

	watchEffect(() => {
		if (props.visible && props.id) {
			loadings.detail = true
		}

		bottomBtn[1].money = 0
		bottomBtn[2].money = 0
		bottomBtn[0].money = 0
		if (props?.detailedData?.items && props?.detailedData.items?.length) {
			props?.detailedData.items?.map((e: any) => {
				bottomBtn[1].money += e.taxPrice
				bottomBtn[2].money += e.afterTaxPrice
				bottomBtn[0].money += e.price
			})
		}
	})

	const handlerClick = (type: string) => {
		// invoiceKind.value = props?.detailedData?.invoiceKind
		visibles[type] = true
		if (type == 'redBlood') {
			resubmitId.value = props?.id as string
		}
	}
</script>

<style lang="less" scoped>
	.invoiceing-detail-dialog {
		.contract-information-left {
			min-height: 100%;
			padding-right: 15px;
			border-right: 1px solid @border-color-light;
		}

		.approval-process-list-right {
			min-height: 100%;
			padding-left: 15px;
		}

		.ant-descriptions-item-content {
			padding-right: 20px;
		}

		.ant-form-item {
			width: 100%;
			margin: 0;
		}

		.subject {
			width: 100%;
			height: 48px;
			background: #e1edff;
			border-radius: 0px 0px 0px 0px;
			// opacity: 0.12;
			font-size: 14px;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			// color: #0266ff;
			line-height: 48px;
			text-align: center;
		}

		.table-bottom-class {
			margin-left: 20px;
		}
		.invoiceing {
			margin: 10px 10px;
			display: inline-block;
		}
		.flush-red-icon {
			cursor: pointer;
			color: #0266ff;
			margin-left: 5px;
		}
		.invoiceing-text {
			margin: 0 3px;
		}
		.failure-box {
			// width: 850px;
			width: 100%;
			height: 40px;
			background: #fffbe6;
			border-radius: 2px 2px 2px 2px;
			opacity: 1;
			border: 1px solid #ffe58f;
			padding-left: 10px;
			margin-bottom: 10px;
			.failure-reason {
				margin: 3px 5px;
				line-height: 40px;
			}
		}
	}
</style>
